<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎来到提瓦特大陆</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
    <style>
        p.c1{
            font-family: "Sofia";
            font-size: 33px;
           color:chocolate;
           text-align: center;
           border-style: groove;
           border-color: pink;
           font-weight: 900;
        }
        body{
            background-color:  aquamarine;
        }
        li{
            float:left;
            width: 400px;
            height: 20px;
            margin: 2px;
            list-style:none;
            text-align: center;
            background: palegreen;
            display: inline;
            font-size:x-large;
        }
        footer{
	        clear:both;
	        display:block;
	        background-color:chocolate;
	        color:#FFFFFF;
	        text-align:center;
	        padding:2px;
        }
        a {
            text-decoration: none;
        }
        a:link,a:visited {
            display:block;
            font-weight:bold;
            color:#FFFFFF;
            background-color:darkorchid;
            text-align:center;
            text-transform:uppercase;
        }
        a:hover,a:active {
            background-color:burlywood;
        }
        .c2{
            border-collapse: collapse;
            width: 1500px;
            height: 100px;
        }
        .c2 td{
            width: 200px;
            border: 3px solid black;
            padding: 10px;
            text-align: center;
        }
        .c2 th{
            background-color: orange;
            color: white;
        }
        .d1{
            background-color: blueviolet;
            color: rgb(47, 255, 252);
        }
        .d2{
            background-color: cyan;
            color: rgb(222, 135, 151);
        }
        .d3{
            background-color: crimson;
            color: beige;
        }
        .d4{
            background-color: dodgerblue;
            color: chocolate;
        }
        .d5{
            background-color: darkgoldenrod;
            color: brown;
        }
        div.f1{
            margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 700px;
  box-shadow: 10px 10px 10px;
  background-color:rgb(251, 255, 127)
        }
        div.f1:hover {
  border: 3px solid #777;}
  div.f2 {
  padding: 15px;
  text-align: center;
  font-size: xx-large;
}
    </style>
</head>
<body>
    <p class="c1">提瓦特欢迎您的到来！</p>
    <header>
        <ul>
            <li><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz#/:">原神官网</a></li>
            <li><a href="https://space.bilibili.com/401742377?spm_id_from=333.337.0.0">B站原神网</a></li>
            <li><a href="https://bbs.mihoyo.com/ys/">原神玩家交流网</a></li><br/>
        </ul>
    </header>
    <main>
        <table class="c2">
            <thead>
                <th>角色</th>
                <th>属性</th>
                <th>命之座</th>
                <th>生日</th>
                <th>武器类型</th>
                <th>称号</th>
            </thead>
            <tbody>
                <tr class="d1">
                    <td>雷电将军</td>
                    <td>雷</td>
                    <td>天下人座</td>
                    <td>6月26日</td>
                    <td>长柄武器</td>
                    <td>一心净土</td>
                </tr>
                <tr class="d1">
                    <td>刻晴</td>
                    <td>雷</td>
                    <td>金紫定垂座</td>
                    <td>11月20日</td>
                    <td>单手剑</td>
                    <td>霆霓快雨</td>
                </tr>
                <tr class="d2">
                    <td>甘雨</td>
                    <td>冰</td>
                    <td>仙麟座</td>
                    <td>12月2日</td>
                    <td>弓</td>
                    <td>循循守月</td>
                </tr>
                <tr>
                    <td>魈</td>
                    <td>风</td>
                    <td>金翅鹏王座</td>
                    <td>4月17日</td>
                    <td>长柄武器</td>
                    <td>护法夜叉</td>
                </tr>
                <tr class="d3">
                    <td>胡桃</td>
                    <td>火</td>
                    <td>引蝶座</td>
                    <td>7月15日</td>
                    <td>长柄武器</td>
                    <td>雪霁梅香</td>
                </tr>
                <tr class="d4">
                    <td>神里绫人</td>
                    <td>水</td>
                    <td>神守柏座</td>
                    <td>3月26日</td>
                    <td>单手剑</td>
                    <td>磐祭叶守</td>
                </tr>
                <tr class="d5">
                    <td>钟离</td>
                    <td>岩</td>
                    <td>岩王帝君座</td>
                    <td>12月31日</td>
                    <td>长柄武器</td>
                    <td>尘世闲游</td>
                </tr>
            </tbody>
        </table>
        <div class="f1">
            <a target="_blank" href="原神/公子.webp">
              <img src="原神/公子.webp" alt="公子" width="700" height="700">
            </a>
            <div class="f2">公子</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/海灯节.webp">
              <img src="原神/海灯节.webp" alt="海灯节" width="700" height="700">
            </a>
            <div class="f2">海灯节合照</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/温迪.webp">
              <img src="原神/温迪.webp" alt="风神温迪" width="700" height="700">
            </a>
            <div class="f2">风神温迪</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/甘雨.webp">
              <img src="原神/甘雨.webp" alt="甘雨" width="700" height="700">
            </a>
            <div class="f2">甘雨</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/甘雨2.webp">
              <img src="原神/甘雨2.webp" alt="甘雨" width="700" height="700">
            </a>
            <div class="f2">甘雨</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/申鹤.webp">
              <img src="原神/申鹤.webp" alt="申鹤" width="700" height="700">
            </a>
            <div class="f2">申鹤</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/诺艾尔.webp">
              <img src="原神/诺艾尔.webp" alt="诺艾尔" width="700" height="700">
            </a>
            <div class="f2">诺诶尔</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/钟离.webp">
              <img src="原神/钟离.webp" alt="岩神钟离" width="700" height="700">
            </a>
            <div class="f2">岩神钟离</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/雷电将军.webp">
              <img src="原神/雷电将军.webp" alt="雷神雷电将军" width="700" height="700">
            </a>
            <div class="f2">雷神雷电将军</div>
          </div>
          <div class="f1">
            <a target="_blank" href="原神/魈.webp">
              <img src="原神/魈.webp" alt="魈" width="700" height="700">
            </a>
            <div class="f2">魈</div>
          </div>
    </main>
    <footer>
        <h1>本界面由YF.Han制作</h1>
    </footer>
</body>
</html>